<template>
	<view class="page-wrap">
		<match-media :min-width="MAX_SIZEiZE">
			<navBar></navBar>
		</match-media>
		<match-media :max-width="MAX_SIZEiZE - 1">
			<uni-nav-bar fixed statusBar :backgroundColor="`var(--bg-27)`" :border="false" @clickLeft="clickLeft">
				<text class="page-title">{{pageName}}</text>
				<view class="left-icon" slot="left"> </view>
			</uni-nav-bar>
		</match-media>
		<view class="content">
			<pc-nav-bar :pageName="pageName" class="page-name">
			</pc-nav-bar>
			<scroll-view refresher-default-style="white" refresher-background="transparent" refresher-enabled
				scroll-with-animation :refresher-triggered="triggered" @refresherrefresh="refresherrefresh"
				@scroll="onScroll" :scroll-top="scrollTop" scroll-y="true" :style="{height:scrollHeight}"
				class="scroll-Y">
				<view class="slot_list">
					<view class="slot_item" v-for="(item,index) in gameList" :key="index">
						<view class="adaptCar-wrap">
							<image :src="item.gamepic" mode="aspectFit" @click="clickGameurl(item,index)"></image>
						</view>
						<view class="game-info">

							<view class="game-name">
								{{item.game_name}}
							</view>
							<view class="game-props">
								<view class="props-item">
									<image class="props-icon" src="@/static/image/Mine/Collect/game-collected.png"
										mode="aspectFit"></image>
									<text class="props-text">{{ transformNum(item.collectnum) }}</text>
								</view>
								<view class="props-item">
									<image class="props-icon" src="@/static/image/Mine/Collect/game-hot.png"
										mode="aspectFit">
									</image>
									<text class="props-text"> {{ transformNum(item.hotnum) }}</text>
								</view>
							</view>
							<view class="btns">
								<view class="btn unlike" @click="handleLike(item,index)">unfavourite</view>
								<view class="btn entry" @click="intoGame(item,index)">Play</view>
							</view>
						</view>
					</view>
				</view>
				<view class="loadMoreWrap">
					<uni-load-more :status="status" :contentText="contentText"></uni-load-more>
				</view>
			</scroll-view>
		</view>
		<backToTop :isShow="isShow" @scrollToTop="scrollToTop"></backToTop>
	</view>
</template>
<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import {
		MAX_SIZEiZE
	} from '@/common/app.js'
	import {
		sendMessage
	} from '@/api/websocket.js'
	import {
		Debounce
	} from '@/utils/common.js'
	import {
		goGamePang
	} from '@/utils/routerJump.js'
	import pcNavBar from '@/components/pcNavBar/pcNavBar.vue'
	export default {
		components: {
			pcNavBar
		},
		data() {
			return {
				MAX_SIZEiZE,
				gameTypeList: [{
					gameName: '',
					gameNumber: 0
				}],
				scrollTop: 0,
				searchParams: {
					cate_id: '',
					order: '2',
					page: 1,
					page_ini: 25,
					gamename: ''
				},
				gameList: [],
				totalCount: 0,
				curGameCateInfo: null,
				seachText: '',
				showType: false,
				isFocus: false,
				status: 'loading', //  more/loading/noMore	
				contentText: {
					contentdown: this.$t('Page.loadmore.xl'),
					contentrefresh: this.$t('Page.loadmore.jzz'),
					contentnomore: this.$t('Page.loadmore.mygdl')
				},
				pageName: this.$t('Page.mine.myCollection'),
				triggered: false,
				isShow: false,
				triggerHeight: Math.ceil(uni.getSystemInfoSync().windowHeight / 2.5),
				intersectionObserver: null,
				maxPage: 0
			}
		},
		watch: {
			totalCount: {
				handler(newVal) {
					if (newVal) {
						const remainder = this.totalCount % this.searchParams.page_ini
						const countPage = this.totalCount / this.searchParams.page_ini
						this.maxPage = remainder === 0 ? countPage : Math.floor(countPage) + 1
						this.initIntersectionObserver()
					}
				}
			}
		},
		computed: {
			...mapState({
				theme: state => state.app.theme,
				windowSize: state => state.app.windowSize
			}),
			...mapGetters('app', ['isLogin']),
			scrollHeight() {
				const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
				if (this.windowSize.windowWidth <= 768) {
					return 'calc(100vh - 44px - var(--status-bar-height))'
				} else {
					return 'calc(100vh - 70px - 70px - 4px)'
				}
			},
		},
		onLoad() {
			this.getSubGame()
		},
		destroyed() {
			if (this.intersectionObserver) {
				this.intersectionObserver.disconnect()
			}
		},
		onshow() {
			this.initIntersectionObserver()
		},
		methods: {
			initIntersectionObserver() {
				this.intersectionObserver = uni.createIntersectionObserver(this);
				this.intersectionObserver.relativeTo('.scroll-Y').observe('.loadMoreWrap', (res) => {
					console.log('res.intersectionRatio: ', res.intersectionRatio);
					console.log('this.searchParams.page: ', this.searchParams.page);
					console.log('this.maxPage: ', this.maxPage);
					if (res.intersectionRatio > 0 && this.searchParams.page < this.maxPage) {
						if (this.searchParams.page >= 1) {
							this.searchParams.page++
						}
						this.getSubGame();
					}
				})
			},
			onScroll: Debounce(function(e) {
				this.scrollTop = e.detail.scrollTop
				if (e.detail.scrollTop >= this.triggerHeight) {
					this.isShow = true
				} else {
					this.isShow = false
				}
			}, 500),

			scrollToTop(e) {
				this.scrollTop = 0
				this.isShow = false
			},

			refresherrefresh(e) {
				this.triggered = true
				setTimeout(() => {
					this.gameList = [];
					this.searchParams.page = 1;
					this.getSubGame();
				}, 500)
			},

			getSubGame() {
				this.status = 'loading'
				// 我的收藏  
				const {
					MYCOLECT
				} = this.$api
				sendMessage({
					flag: MYCOLECT,
					content: this.searchParams
				})
				uni.$once(MYCOLECT, (res) => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.triggered = false
						if (this.searchParams.page === 1) {
							this.gameList = data.list
							this.totalCount = data.count
						} else {
							this.gameList = [...this.gameList, ...data.list]
						}
						console.log('this.gameList.length: ', this.gameList.length);
						if (this.gameList.length < this.totalCount) {
							setTimeout(() => {
								this.status = 'more'
							}, 1000)
						} else {
							this.status = 'noMore'
						}
					}
				})
			},

			// lower(e) {
			// 	if (this.gameList.length < this.totalCount) {
			// 		this.searchParams.page++
			// 		this.getSubGame()
			// 		this.status = 'loading'
			// 	} else {
			// 		this.status = 'noMore'
			// 	}
			// },
			intoGame: Debounce(function(item, index) {
				this.clickGameurl(item, index)
			}, 500),
			clickGameurl(item, index) {
				goGamePang({
					id: item.id,
					name: item.game_name,
					namecode: item.namecode,
					gamepic: item.gamepic
				})
			},

			handleLike: Debounce(function(item, index) {
				this.dealCollect(item, index)
			}, 500),

			dealCollect(item, index) {
				const {
					DEALCOLLECT
				} = this.$api
				sendMessage({
					flag: DEALCOLLECT,
					content: {
						game_id: item.id,
						status: 2
					}
				})
				uni.$once(DEALCOLLECT, (res) => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					res.code === 1 && this.gameList.splice(index, 1)
				})
			},
			clickLeft() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
			// 转换收藏量和热度单位
			transformNum(number) {
				number = parseInt(number)
				// 1e3为10的三次幂=1000 1e4=10000 1e7=10000000(百万)
				if (number < 1e3) {
					return number
				} else if (number >= 1e3 && number < 1e4) {
					return `${(number / 1e3).toFixed(1)}K`
				} else if (number >= 1e4 && number < 1e6) {
					return `${(number / 1e4).toFixed(1)}W`
				} else if (number >= 1e6 && number < 1e7) {
					return `${(number / 1e6).toFixed(1)}M`
				} else if (number >= 1e7 && number < 1e8) {
					return `${(number /1e7 ).toFixed(1)}kw`
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page-wrap {
		background: var(--bg-3);
		min-height: 100vh;

		.page-title {
			width: 100%;
			margin: auto;
			height: 44px;
			line-height: 44px;
			font-size: 20px;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
		}

		.left-icon {
			width: 22px;
			height: 22px;
			background: url('@/static/image/back-icon.png') no-repeat;
			background-size: contain;
		}

		.content {
			width: 100%;
			height: calc(100vh - 44px - var(--status-bar-height));
			padding: 0 15px;
			background: var(--bg-3);
			overflow-y: scroll;
			box-sizing: border-box;

			.scroll-Y {
				padding-top: 15px;
				overflow-y: scroll;

				/* 隐藏竖向滚动条 */
				::-webkit-scrollbar {
					display: none;
				}

				.slot_list {
					width: 100%;
					display: grid;
					grid-template-columns: repeat(auto-fill, minmax(345px, 1fr));
					/* 三列等宽 */
					gap: 15px;
					box-sizing: border-box;

					.slot_item {
						width: 100%;
						padding: 15px;
						border-radius: 15px;
						background: rgba(204, 181, 155, 0.20);
						display: flex;
						align-items: center;
						box-sizing: border-box;

						.adaptCar-wrap {
							width: 90px;
							height: 90px;
							margin-right: 10px;
							border-radius: 10px;
							overflow: hidden;

							image {
								width: 90px;
								height: 90px;
							}
						}

						.game-info {
							// flex: 1;
							display: flex;
							flex-direction: column;

							.game-name {
								font-size: 14px;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: bold;
								color: var(--color-25);
								line-height: 20px;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;
							}

							.game-props {
								display: flex;
								align-items: center;
								margin-top: 10px;

								.props-item {
									display: flex;
									align-items: center;
									justify-content: flex-start;
									margin-right: 30px;

									&:last-child {
										margin-right: 0;
									}

									.props-icon {
										width: 15px;
										height: 15px;
										margin-right: 5px;
									}

									&:nth-child(2) {
										justify-content: flex-end;
									}

									.props-text {
										color: var(--color-11);
										font-size: 12px;
									}
								}
							}
						}

						.btns {
							display: flex;
							align-items: center;
							box-sizing: border-box;
							margin-top: 10px;

							.btn {
								// min-width: 100px; 
								height: 28px;
								line-height: 28px;
								text-align: center;
								font-weight: bold;
								border-radius: 100px;
								cursor: pointer;
								margin-right: 20px;
								padding: 0 10px;
								box-sizing: border-box;

								&:last-child {
									margin-right: 0;
								}
							}

							.unlike {
								background: var(--bg-46);
								box-shadow: inset 0px 4px 4px 0px var(--bg-47);
								color: #fff;
							}

							.entry {
								// min-width: 100rpx;
								background: var(--bg-13);
								box-shadow: inset 0px 4px 4px 0px var(--box-shadow-color-1);
								color: var(--color-28);
								padding: 0 20px;
							}
						}

					}
				}
			}
		}
	}

	// PC
	@media screen and (min-width: 768px) {

		.page-wrap {
			padding-top: 70px;

			.pc-back {
				width: 100%;
				padding: 0 30px;
				height: 60px;
				display: flex;
				align-items: center;
				background: var(--bg-24);
				border-radius: 30px;
				margin: 10px auto 0;
				box-sizing: border-box;

				.back-cont {
					display: flex;
					align-items: center;
					height: 30px;
					padding: 0 10px;
					border-radius: 100px;
					background: #3E1A10;

					.back-icon {
						width: 13px;
						height: 11px;
						background: url('@/static/image/back-icon.png') no-repeat;
						background-size: contain;
					}

					.back-text {
						font-size: 13px;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 18px;
						margin-left: 5px;
					}
				}

				.page-title {
					width: fit-content !important;
					margin-left: 15px;
				}
			}

			.content {
				width: 100%;
				min-height: calc(100vh - 70px) !important;
				height: calc(100vh - 70px) !important;
				overflow-y: auto;
				background: var(--bg-3);
				padding: 10px 30px 0 30px !important;
				box-sizing: border-box;


				.slot_list {
					display: grid;
					grid-template-columns: repeat(auto-fill, minmax(345px, 1fr));
					/* 三列等宽 */
					gap: 30px !important;
				}
			}
		}
	}
</style>